<template>
  <div>
    <div class="outDiv">
      <goBack></goBack>
      <scroller style="top: 0.88rem;">
        <div>
          <Header contentTitle="生涯测评"></Header>
          <div class="main" v-show="showBlank">
            <div class="careerTests">
              <div class="title">
                <div class="left">生涯测评对应专业</div>
                <div
                  class="right"
                  v-show="careerList.length > 0"
                  @click="commonJs.gopush('chooseRecord')"
                >换一组</div>
              </div>
              <div class="content_no_add" v-if="careerList.length == 0">
                <p>尚未添加专业类</p>
                <button @click="commonJs.gopush('chooseRecord')">去测试</button>
              </div>
              <ul class="content_add" v-else>
                <li
                  class="contentItem"
                  v-for="(item, index) of careerList"
                  :key="index"
                  @click="handleCareerClick(item)"
                >
                  <div class="chooseIcon">
                    <img
                      v-if="careerChooseList.indexOf(item.major) !== -1"
                      class="imgIcon"
                      src="~/static/images/search_icon_sure.png"
                      alt
                    />
                    <img class="imgIcon" src="~/static/images/search_icon_nor.png" v-else alt />
                  </div>
                  <div class="name">
                    <!-- <div>{{ item.major }}</div> -->
                    <p>{{ item.major }}</p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="addBySelf">
              <div class="self_title">自主添加专业类</div>
              <ul class="chooseAreaList">
                <GetMoreChoose
                  leftTitle="尚未添加专业类"
                  :showArr="zhuanye"
                  plhdText="请输入意向专业"
                  @removeArrItem="finalList"
                  modelType="1"
                  v-on:fromGetChose="getMoCheck"
                ></GetMoreChoose>
              </ul>
            </div>
          </div>
          <div style="width: 100%;height: 2.8rem;"></div>
        </div>
      </scroller>
    </div>
    <div class="botFixed">
      <div class="btn-box">
        <sumbitBtn message="下一步" @btnClick="goNext"></sumbitBtn>
      </div>
    </div>
  </div>
</template> 

<script>
import goBack from "~/components/goBack";
import Header from "~/components/Header";
import GetMoreChoose from "~/components/GetMoreChoose";
import { getUsage, getAdvantageUsage, saveMajor } from "~/api/selectCourse";
import { getReportList } from "~/api/evaluation";
import sumbitBtn from "./components/sumbitBtn";
import ls from "store2";
export default {
  components: {
    Header,
    GetMoreChoose,
    goBack,
    sumbitBtn
  },
  data() {
    return {
      showBlank:false,
      zhuanye: [],
      careerList: [],
      careerChooseList: [],
      botList: [],
      hasCho_1: true,
      hasCho_2: true,
      hasCho_3: false,
      xNum: this.$store.state.xxNum
    };
  },
  created() {
    // this.commonJs.gologins();
    if (this.$route.query.type) {
      this.careerList = JSON.parse(this.$route.query.type);
      this.careerList.forEach(item => {
        this.careerChooseList.push(item.major);
      });
    } else {
      this.getRepos();
    }
    this.$store.commit("changexxNum", 10);
  },

  mounted: function() {},

  methods: {
    isRepeat(arr) {
      var hash = {};
      for (var i in arr) {
        if (hash[arr[i]])
          //hash 哈希
          return true;
        hash[arr[i]] = true;
      }
      return false;
    },
    goNext() {
      let saveArr = this.careerChooseList.concat(this.botList);
      let lens = saveArr.length;
      if (lens < 1 || lens > 10) {
        this.$vux.toast.text("专业类至少需要添加一个，至多添加十个");
        return false;
      } else {
        let ary = saveArr.join(",");
        this.saveMajors(ary);
        // this.getusage();
      }
      //未付款情况下 缓存用户填的意向类专业
      ls.set("nopayxkyx", saveArr);
    },
    getRepos() {
      this.$vux.loading.show()
      getReportList(ls.get("userType"))
        .then(res => {
          if (res.code === "0") {
            if (res.data.length == 0) {
            } else {
              let zhsData = res.data;
              if (zhsData[0].generate === 0) {
                this.flag = true;
              }
              var dofilter = function(element, index, array) {
                if (element.generate < 1) {
                  // 年龄过滤
                  return false;
                }
                return true;
              };
              zhsData = zhsData.filter(dofilter);
              /* test */
              this.careerList = zhsData[0].majors;
              this.careerList.forEach(item => {
                this.careerChooseList.push(item.major);
              });
              console.log(" this.careerList: ", this.careerList);
              // this.$vux.loading.hide();
            }
          }
          this.showBlank=true;
          this.$vux.loading.hide()
        })
        .catch(error => {
          this.$vux.loading.hide();
        });
    },
    saveMajors(str) {
      saveMajor(str, ls.get("userType"))
        .then(res => {
          if (res.code === "0") {
            this.$vux.toast.text(res.message);

            this.commonJs.gopush("advantageTest");
          }
        })
        .catch(() => {
          this.$vux.toast.text("服务器繁忙，请稍后再试");
        });
    },
    getMoCheck(das) {
      this.botList = das;
    },
    finalList(data) {
      if (data.type == "1") {
        this.zhuanye = data.msgList;
      }
    },
    // 是否保留参照需求
    handleCareerClick(obj) {
      this.xNum = this.$store.state.xxNum;
      if (this.careerChooseList.indexOf(obj.major) !== -1) {
        this.careerChooseList = this.careerChooseList.filter(
          x => x != obj.major
        );
        this.xNum += 1;
      } else {
        this.careerChooseList.push(obj.major);
        this.xNum -= 1;
      }
      this.$store.commit("changexxNum", this.xNum);

      console.log("this.careerChooseList: ", this.careerChooseList);
    },
    deleteChoose(index) {
      switch (index) {
        case 1:
          this.hasCho_1 = false;
          break;
        case 2:
          this.hasCho_2 = false;
          break;
        case 3:
          this.hasCho_3 = false;
          break;
        default:
          break;
      }
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.botFixed {
  position: fixed;
  height: 1.2rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px -4px 10px 0px rgba(204, 204, 204, 0.2);
  left: 0;
  bottom: 0;
  width: 7.5rem;
  overflow: hidden;
  .btn-box {
    width: 3.2rem;
    margin: 0.25rem auto;
  }
  // span {
  //   width: 3.8rem;
  //   height: 0.7rem;
  //   // background: rgba(108, 191, 32, 1);
  //   border-radius: 0.1rem;
  //   font-size: 0.3rem;
  //   font-weight: bold;
  //   color: rgba(255, 255, 255, 1);
  //   text-align: center;
  //   display: block;
  //   line-height: 0.7rem;
  //   margin: 0.25rem auto;
  // }

  // .ss1 {
  //   background: #eee;
  // }

  // .ss2 {
  //   background: @mainColor;
  // }
}

.header {
  width: 100%;
  height: 0.88rem;
  text-align: right;
  padding: 0 0.3rem;
  background: transparent;
  font-size: 0.3rem;
  letter-spacing: 0.05rem;
  color: #222;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .imgIcon {
    width: 0.4rem;
    height: 0.4rem;
  }
}

.outDiv {
  width: 100%;
  height: 100vh;
  background: #fff;

  .main {
    margin-top: 0.3rem;
    padding: 0 0.3rem;

    .careerTests {
      margin-bottom: 0.31rem;

      .title {
        margin-bottom: 0.32rem;
        letter-spacing: 0.02rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          color: #222;
          font-weight: bold;
          font-size: 0.3rem;
        }

        .right {
          font-size: 0.26rem;
          font-weight: bold;
          color: @mainColor;
        }
      }

      .content_no_add {
        width: 100%;
        height: 3rem;
        background: #fafafa;
        border-radius: 0.1rem;
        text-align: center;
        padding-top: 0.9rem;

        p {
          font-size: 0.26rem;
          font-weight: bold;
          color: #999;
          margin-bottom: 0.2rem;
        }

        button {
          width: 1.8rem;
          height: 0.6rem;
          line-height: 0.6rem;
          text-align: center;
          border-radius: 0.1rem;
          border: 1px solid @mainColor;
          color: @mainColor;
          font-size: 0.26rem;
          // font-weight: bold;
          letter-spacing: 0.03rem;
          background: transparent;
          padding: 0;
          outline: none;
        }
      }

      .content_add {
        width: 100%;
        min-height: 4.5rem;
        height: auto;
        border: 1px solid #eee;
        border-radius: 0.1rem;
        padding: 0;
        list-style: none;

        .contentItem {
          padding: 0.3rem;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #eee;

          .chooseIcon {
            margin-right: 0.28rem;

            .imgIcon {
              width: 0.4rem;
              height: 0.4rem;
            }
          }

          .name {
            text-align: left;
            padding: 0.25rem;
            p {
              color: #222;
              font-size: 0.26rem;
              font-weight: bold;
              line-height: 0.45rem;
            }
          }
        }

        li:last-child {
          border-bottom: none;
        }
      }
    }

    .addBySelf {
      .self_title {
        color: #222;
        font-size: 0.3rem;
        font-weight: bold;
        margin-bottom: 0.3rem;
      }

      .chooseAreaList {
        padding-left: 0;
        list-style: none;

        li:first-child {
          border-top-left-radius: 0.1rem;
          border-top-right-radius: 0.1rem;
        }

        li:last-child {
          border-bottom-left-radius: 0.1rem;
          border-bottom-right-radius: 0.1rem;
        }

        li:nth-child(2),
        li:nth-child(3) {
          border-top: none;
        }

        li {
          width: 100%;
          height: 1.5rem;
          border: 1px solid #eee;
          // padding-left: 1.1rem;
          padding-right: 0.3rem;

          // overflow: hidden;
          .hasCho {
            height: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .describe {
              h2 {
                color: #222;
                font-size: 0.3rem;
                font-weight: bold;
                margin-bottom: 0.1rem;
              }

              p {
                color: #bbb;
                font-size: 0.26rem;
                font-weight: bold;
              }
            }
          }

          .hasNotChoose {
            height: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.26rem;

            span {
              font-weight: bold;
              color: #999;
            }

            button {
              width: 1.8rem;
              height: 0.6rem;
              background: #fff;
              border: 1px solid @mainColor;
              border-radius: 0.1rem;
              outline: none;
              color: @mainColor;
              font-weight: bold;
              letter-spacing: 0.03rem;
            }
          }
        }
      }
    }
  }
}
</style>
